* {
	margin: 0;
	padding: 0;
}

html,
body {
	background: #fff;
}

.btn {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 60px;
	background: #eee;
}

.btn input {
	width: 100%;
	height: 100%;
	font: 20px/60px 'microsoft yahei';
}

.blackBoxSpeak {
	width: 176px;
	height: 176px;
	position: fixed;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	background: url("./image/ic_record@2x.png") no-repeat 28px 16px/65px 104px, url("./image/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;
	background: rgba(0, 0, 0, .7);
	display: none;
	border-radius: 12px;
}

.blackBoxSpeakConent {
	font: 14.4px '微软雅黑 Light';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: block;
	text-align: center;
	width: 90%;
	padding: 8px 0;
	margin: auto;
	color: #ffffff;
	font-weight: 200;
	border-radius: 4px;
}

.blackBoxPause {
	width: 176px;
	height: 176px;
	position: fixed;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	background: url("./image/ic_record@2x.png") no-repeat 28px 16px/65px 104px, url("./image/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;
	background: rgba(0, 0, 0, .7);
	display: none;
	border-radius: 12px;
}

.blackBoxPauseContent {
	font: 14.4px '微软雅黑 Light';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: block;
	text-align: center;
	width: 90%;
	padding: 8px 0;
	margin: auto;
	color: #ffffff;
	font-weight: 200;
	border-radius: 4px;
}